<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<parent></parent>
		</div>
	
	    <script type=text/javascript src="../../vue.js"></script>
		<script>
		    const app = Vue.createApp({});
			app.component('parent', {
			    mounted(){
					console.log("this.$refs = ",this.$refs)
			  	    // 访问子元素<input>，让其具有焦点
			  	    this.$refs.inputElement.focus();
			  	    // 访问子组件<child>的message数据属性
					console.log("this.$refs.childComponent = ",this.$refs.childComponent)
			  	    console.log(this.$refs.childComponent.message)
			    },
				template: `
					<div>
						<input ref="inputElement"><br> <!--子元素-->
						<child ref="childComponent"></child> <!-- 子组件-->
					</div>`
			})
			
			app.component('child', {
			 	data(){
			 		return {
			 			message: 'Java无难事'
			 		}
			 	},
				template: '<p>{{message}}</p>'
			})

			app.mount('#app');
		</script>
	</body>
</html>